昨天我們透過 npm i sass 成功將 sass 下載到了專案中，也在 package.json 這一份 package 清單中的 dependencies 找到了 Sass 的存在證明。

雖然現在才講有點晚了，但我們昨天所安裝的 Sass 是一種 CSS 的 預處理器，預處理器有著自己的 CSS 寫法，而在使用預處理器寫完 CSS 之後，最終還是得編譯成原生的 CSS 才能讓網頁讀懂。

現階段我們可以知道，要使用預處理器的話有兩件事情需要了解：

• 預處理器的寫法
• 如何編譯成原生的 CSS

寫法

這次所安裝的 Sass 預處理器，他能接受兩種寫法：Sass 與 SCSS。
此二者間明顯的差異在於括弧、分號的存在與否：

Sass 的寫法：

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

SCSS 的寫法：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

這邊所舉的例子是預處理器中的巢狀寫法。

編譯成 CSS

我們要先使用官方所提供的編譯方式：
Dart Sass Command-Line Interface

而要使用這個 CLI，我們需要將 Sass 安裝在全域，而不是僅安裝在這個專案的範圍中而已。

在終端機透過以下語法安裝 Sass：

npm install -g sass

如此一來我們也可以把專案裡面的 sass 給移除：

npm uninstall sass

在終端機輸入 sass --version 確認是否安裝成功：

CLI 已經就緒後，就可以開始將 SCSS 的檔案編譯成原生的 CSS 了。

建立一個 input.scss 檔案，拿前面 SCSS 範例的寫法貼上：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

透過官方文件可以得知將 SCSS 編譯成 CSS 的指令：

sass <input.scss> [output.css]

在終端機中輸入該指令後：

便可以得到一份依據 input.scss 打包而成的 output.css 與 output.css.map

其中 outpust.css.map 是一份名為 source maps 的檔案，這份檔案作用的對象是瀏覽器的 dev tool，瀏覽器可以透過這份檔案將網頁上的樣式對應到你的 SCSS 檔案，而非編譯後的原生 CSS 檔案。

而這邊的 output.css 就是我們從 SCSS 編譯而來的原生 CSS 內容了，可以看到透過 SCSS 的巢狀寫法，省去了我們在原生 CSS 中每次都要在前面加上一個共同 class 的工。

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/*# sourceMappingURL=output.css.map */

參考

官網：
https://sass-lang.com/

Sass 與 SCSS 的差異：
問過一百次的問題之 Sass 和 SCSS 的差別

卡斯伯大大對 Sass Source Maps 的介紹！
Sass Source Maps

從未想過寫文也是種極限運動。